<template>
	<Layout>
		<view class="content">
			<view class="custom-nav" :style="{ paddingTop: statusBarHeight + 'px' }">
				<view v-if="to" class="back-button" @click="goBack">
					<uni-icons color="rgba(255,255,255,0.9)" type="left" size="24"></uni-icons>
				</view>
			</view>
			<view class="top">
				<img class="renwu" src="@/static/index/背景-人物.svg" alt="" />
			</view>
			<view class="top_bottom"></view>
			<view class="name_block">
				<view class="name">
					<view class="name_content">
						<view class="company_title block_center">
							<img class="company_icon" src="@/static/index/公司.svg" alt="">
							<p class="company_text">{{ company.name }}</p>
						</view>
						<view class="name_info">
							<view class="name_title">
								<view class="block_center">
									<p class="name_text">{{ user.name }}</p>
									<img v-if="user.gender == 1" class="name_sex" src="@/static/index/男.svg" alt="">
									<img v-else class="name_sex" src="@/static/index/女.svg" alt="">
								</view>
								<view class="name_postion">
									<img class="postion_icon" src="@/static/index/职位.svg" alt="">
									{{ user.position }}
								</view>
							</view>
							<view v-if="user.avatar" class="avatar">
								<image @click="previewImage(user.avatarWatermark)" mode="heightFix"
								       style="height: 100%;object-fit: contain;display: block;" :src="user.avatar" alt="" />
							</view>
						
						</view>
						<view class="contact_content">
							<view class="phone wechat" @click="callPhone">
								<img class="contact_icon" src="@/static/index/电话.svg" alt="">
								<text>{{ user.phone }}</text>
							</view>
							<view @click="sendEmail()" class="wechat">
								<img class="contact_icon" src="@/static/index/邮箱0314.svg" alt="">
								<text class="contact_text">{{ user.email }}</text>
							
							</view>
						
						</view>
					</view>
				</view>
				<view class="operate">
					<view class="operate_content">
						<view @click="toView()" class="operate_block">
							<img class="operate_icon" src="@/static/index/官方网址.svg" alt="">
							<p>公司官网</p>
						</view>
						<view class="operate_block" @click="openMiniProgram()">
							<img class="operate_icon" src="@/static/index/来访申请.svg" alt="">
							<p>来访预约</p>
						</view>
						<button class="operate_block" open-type="share" @click="handleShare">
							<img class="operate_icon" src="@/static/index/分享名片.svg" alt="">
							<p>名片分享</p>
						</button>
					</view>
				</view>
			</view>
			<view class="address">
				<p class="address_title">其他信息</p>
				<view class="other">
					<view class="other_block">
						<view class="other_title">
							<img class="other_icon" src="@/static/index/微信.svg" alt="">
							<p>微信</p>
						</view>
						<view class="other_content" @click="copy()">
							{{ user.wechat }}
						</view>
					</view>
					<view class="other_block">
						<view class="other_title">
							<img class="other_icon" src="@/static/index/传真.svg" alt="">
							<p>传真</p>
						</view>
						<view class="other_content">
							{{ user.fax }}
						</view>
					</view>
					<!--<view>
						<view ref="titleContainer"
							:class="{ 'other_block': true, 'center': isSingleLine, 'start': !isSingleLine }">
							<view class="other_title">
								<img class="other_icon" src="@/static/index/职务.svg" alt="">
								<p>职务</p>
							</view>
							<view class="other_content postion" id="other_postion">
								<view class="other_content_block" v-for="(item, index) in user.title" :key="index">
									{{ item }}
								</view>
							</view>
						</view>
	
					</view>-->
				
				</view>
			</view>
			<view class="address" v-if="user.title.length > 0">
				<p class="address_title">任职情况</p>
				<view class="other">
					<view v-for="(item,index) in user.title" :class="(index < user.title.length-1)?'postion_block postion_block_border':'postion_block'">
						<avatarDisplay class="postion_icon_company" :displayText="item.name" :imgUrl="item.logo"></avatarDisplay>
						<view class="postion_block-right">
							<view class="postion_block-title">
								<p>{{ item.name }}</p>
								<p class="postion_block-text" v-for="(el,index) in item.position">{{ el }}</p>
							</view>
						</view>
					</view>
				</view>
			
			
			</view>
			<view class="address">
				<p class="address_title">公司地址</p>
				<view class="map block_center" @tap="openMap">
					<img class="map_icon" src="@/static/index/公司地址.svg" alt="">
					{{ company.licAddress }}
				</view>
			</view>
			<view class="address">
				<view class="company_header">
					<p class="address_title">企业简介</p>
					<p @click="toMore()" class="block_center">更多 <img class="more" src="@/static/index/企业简介-更多.svg" alt="">
					</p>
				</view>
				<view class="company_block">
					<p class="company_info" v-html="company.introduction">
					
					</p>
					<img class="company_bg"
					     @click="previewImage('https://obs-icon.obs.cn-east-3.myhuaweicloud.com/tzmc/WeChate630cb71cb6db08f2d8e3a3249bf0dd3.jpg')"
					     src="https://obs-icon.obs.cn-east-3.myhuaweicloud.com/tzmc/WeChate630cb71cb6db08f2d8e3a3249bf0dd3.jpg"
					     alt="" />
				</view>
			</view>
			<view class="add">
				<view class="add_button" @click="addContact">
					收下名片
				</view>
			</view>
		</view>
	</Layout>
</template>

<script>
import {
	mapState
} from 'vuex' //引入mapState
import {
	userAPI
} from '@/utils/api'

import avatarDisplay from '@/components/AvatarDisplay.vue'
export default {
	data() {
		return {
			downloadedPhotoPath: '', // 新增下载图片路径存储
			title: 'Hello',
			user_id: null,
			company_id: null,
			user: {
				title:[]
			},
			company: {},
			to: false,
			statusBarHeight: 0,
			isAdding: false,
			isSingleLine: true,
			fixedLineHeight: 30
		}
	},
	components: {
		avatarDisplay
	},
	mounted() {
	},
	// computed: mapState([
	// 	// 从state中拿到数据 箭头函数可使代码更简练
	// 	'name',
	// 	'age'
	// ]),
	onLoad(option) {
		if (!option.user_id) {
			uni.showToast({
				title: "请通过分享的小程序进入！",
				icon: "none"
			})
			uni.navigateTo({
				url: "/pages/error/index"
			})
			return;
		}
		this.user_id = option.user_id ? option.user_id : 278
		this.company_id = option.company_id ? option.company_id : 1
		this.initData();
		const enterOptions = uni.getEnterOptionsSync()
		console.log(option)
		if (enterOptions.scene == 1037) {
			this.to = true
		}
		const systemInfo = uni.getSystemInfoSync();
		this.statusBarHeight = systemInfo.statusBarHeight; // 获取状态栏高度
	},
	
	onShow() {
		uni.setNavigationBarTitle({
			title: this.user.name + '的名片'
		})
	},
	
	onShareAppMessage: function (res) {
		// return eventHandler接收到的分享参数
		return {
			title: '我是' + this.user.name + '，这是我的名片', // 分享名称
			path: `/pages/index/index?company_id=${this.company_id}&user_id=${this.user_id}`, // 这里写你这个页面的路径
			// imageUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg', //这个是显示的图片，不写就默认当前页面的截图
			success: function (shareTickets) {
				console.log(shareTickets + '成功');
				// 转发成功
			},
			fail: function (res) {
				console.log(res + '失败');
				// 转发失败
			},
			complete: function (res) {
				// 不管成功失败都会执行
			}
		}
	},
	
	onAddToFavorites(res) {
		return {
			title: `${this.user?.name}的名片`,
			query: `user_id=${this.user_id}&company_id=${this.company_id}`
		}
	},

	methods: {
		checkLineCount() {
			uni.createSelectorQuery().in(this).select('#other_postion').boundingClientRect(rect => {
				console.log(rect);
				if (rect) {
					// 判断高度是否大于单行的高度
					this.isSingleLine = rect.height <= this.fixedLineHeight;
				}
			}).exec();
		},
		openMap() {
			console.log(this.company.latitude / 1)
			uni.openLocation({
				latitude: Number(this.company.latitude),
				longitude: Number(this.company.longitude),
				name: this.company.name,
				address: this.company.licAddress
			});
		},
		handleShare() {
			const button = this.$nextTick(() => {
				const shareButton = document.querySelector('.hidden-share-button')
				shareButton && shareButton.click()
			})

		},
		initData() {
			var that = this
			userAPI.userInfo({
				'id': this.user_id
			}, {
				'header': {
					'company-id': this.company_id
				}
			}).then(res => {
				that.user = res
				console.log(res);
				setTimeout(() => {
					that.checkLineCount();
				}, 100);
			})
			userAPI.companyInfo({
			}, {
				'header': {
					'company-id': this.company_id
				}
			}).then(res => {
				that.company = res
				console.log(res);
			})
		},

		callPhone() {
			var that = this
			uni.showActionSheet({
				itemList: ['拨打:' + this.user.phone, '复制号码', '添加到通讯录'],
				title: that.user.phone + "",
				success: function (res) {
					switch (res.tapIndex) {
						case 0:
							uni.makePhoneCall({
								phoneNumber: that.user.phone + "" //仅为示例
							});
							break;
						case 1:
							uni.setClipboardData({
								data: that.user.phone + "",
								success: () => {
									uni.showToast({
										title: '号码已复制',
										icon: 'none'
									});
								}
							});
							break;
						case 2:
							that.addContact()
							break;
					}

				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		addContact() {

			if (this.user.avatar == '' || this.user.avatar == null) {
				this.contact()
			} else {
				uni.showLoading({
					title: '加载中...',
					mask: true
				});
				uni.downloadFile({
					url: this.user.avatarWatermark,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {
							this.contact(res.tempFilePath);
						}
					},
					fail: (err) => {
						uni.hideLoading();
						this.contact()
						console.log('下载图片失败', err);
					}
				});
			}
			// 下载图片到本地
			const downloadUrl = this.user.avatar;

			console.log(this.downloadedPhotoPath);

		},
		contact(downloadedPhotoPath = null) {
			if (this.isAdding) return;
			this.isAdding = true;
			let timeout = setTimeout(() => {
				console.log('可能点击了遮罩层关闭');
				this.isAdding = false;
			}, 3000); // 根据实际情况设置一个合理超时时间

			var that = this
			var name = this.user.name + '-' + this.company.abbreviation + '-' + this.user.position
			uni.addPhoneContact({
				photoFilePath: downloadedPhotoPath ? downloadedPhotoPath : '',
				nickName: name,
				firstName: name,
				remark: this.company.name,
				workFaxNumber: this.user.fax,
				title: this.user.position,
				organization: this.company.name,
				mobilePhoneNumber: this.user.phone,
				weChatNumber: this.user.wechat,
				url: 'https://www.tzmc.com',
				email: this.user.email,
				workAddressStreet: this.company.licAddress,
				success: function () {
					console.log('success');
					clearTimeout(timeout);
					that.isAdding = false;
				},
				fail: function (err) {
					if (err.errMsg == 'addPhoneContact:fail auth deny') {
						uni.showModal({
							title: '提示',
							content: '需要授权添加到通讯录权限才能使用此功能，请前往设置打开权限',
							success: (res) => {
								if (res.confirm) {
									uni.openSetting({
										success: (res) => {
											if (res.authSetting['scope.userLocation']) {
												console.log('授权成功');
											}
										}
									});
								}
							}
						});
					}
					clearTimeout(timeout);
					that.isAdding = false;
					console.log('fail', err);
				},
				complete: function () {
					clearTimeout(timeout);
					that.isAdding = false;
					console.log('complete');
				}
			});
		},
		copy() {
			uni.setClipboardData({
				data: this.user.wechat,
				success: () => {
					uni.showToast({
						title: '微信号已复制，请到微信搜索添加好友',
						icon: 'none'
					});
				}
			});
		},
		sendEmail() {
			var that = this
			uni.showActionSheet({
				itemList: ['复制邮箱号'],
				title: this.user.email,
				success: function (res) {
					uni.setClipboardData({
						data: that.user.email,
						success: () => {
							uni.showToast({
								title: '邮箱已复制',
								icon: 'none'
							});
						}
					});
				},
				fail: function (res) {
					console.log(res.errMsg);
				}
			});
		},
		toMore() {
			uni.navigateTo({
				url: '/pages/company/index'
			})
		},
		previewImage(url) {


			uni.previewImage({
				urls: [url],
				// longPressActions: {
				// 	itemList: ['发送给朋友', '保存图片', '收藏'],
				// 	success: function(data) {
				// 		console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
				// 	},
				// 	fail: function(err) {
				// 		console.log(err.errMsg);
				// 	}
				// }
			});
		},
		openMiniProgram() {
			uni.openEmbeddedMiniProgram({
				appId: 'wxc8cddff93e5500a5',
				path: `pageVisitor/pages/visitorCentre?company_id=${this.company_id}&user_id=${this.user_id}`,
				extraData: {
					// 'data1': 'test'
				},
				success(res) {
					// 打开成功
				}
			})
		},
		goBack() {
			uni.navigateBackMiniProgram({
				extraData: {},
				success(res) {
					// 返回成功
				}
			})
		},
		toView() {
			uni.navigateTo({
				url: '/pages/webview/index'
			})
		}

	}
}
</script>

<style lang="scss">
.content {
	padding-bottom: 300rpx;
}

.top {
	width: 100%;
	height: 480rpx;
	background: url('/static/index/背景色块.svg');
	background-size: cover;
}

.renwu {
	width: 262rpx;
	height: 291rpx;
}

.name_block {
	border-radius: 22px;
	box-shadow: 0rpx 7rpx 18rpx 0rpx rgba(12, 32, 202, 0.15);
	// width: 692rpx;
	// height: 522rpx;
	margin: 0 28rpx;
	margin-top: -300rpx;
	overflow: hidden;
}

.name {
	height: 366rpx;
	background: linear-gradient(162deg, #FFFFFF 0%, #F0F2FE 100%);
	overflow: hidden;
}

.name_content {
	margin: 35rpx;
}

.company_icon {
	width: 43rpx;
	height: 43rpx;
	margin-right: 10rpx;
}

.company_text {
	display: inline-block;
	font-weight: 500;
	font-size: 29rpx;
	color: #303133;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.name_info {
	margin-top: 25rpx;
	display: flex;
	justify-content: space-between;
}

.name_text {
	display: inline-block;
	font-weight: 600;
	font-size: 58rpx;
	color: #303133;
	line-height: 76rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	font-family: HONOR Sans CN, HONOR Sans CN;
	max-width: 230rpx;
	white-space: nowrap;
	/* 防止文本换行 */
	overflow: hidden;
	/* 隐藏溢出的内容 */
	text-overflow: ellipsis;
	/* 使用省略号表示溢出的文本 */
}

.name_sex {
	margin-left: 10rpx;
	width: 45rpx;
	height: 45rpx;
}

.name_postion {
	height: 40rpx;
	background: #FFDE9A;
	border-radius: 11rpx 11rpx 11rpx 11rpx;
	font-weight: 400;
	font-size: 25rpx;
	color: #976F34;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding: 3rpx 10rpx;
	display: inline;
	display: inline-flex;
	align-items: center;
	margin-top: 5rpx;
}

.postion_icon {
	width: 20rpx;
	height: 24rpx;
	vertical-align: unset;
}

.avatar {
	// width: 127rpx;
	max-width: 70%;
	height: 120rpx;
	border-radius: 11rpx 11rpx 11rpx 11rpx;
	overflow: hidden;
	box-shadow: 0 2px 2px #ccc;
}

.contact_content {
	display: flex;
	justify-content: space-between;
	margin-top: 43rpx;
}

.wechat {
	font-weight: 400;
	font-size: 29rpx;
	color: #303133;
	line-height: 38rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	display: flex;
	align-items: center;
}

.contact_icon {
	width: 58rpx;
	height: 58rpx;
	margin-right: 15rpx;
	vertical-align: middle;
}

.operate {
	height: 100%;
	background: linear-gradient(180deg, #4F77FD 0%, #486EF5 100%), linear-gradient(180deg, #6A7FF9 0%, #575BFC 72%);
	overflow: hidden;
}

.operate_content {
	margin: 35rpx;
	display: flex;
	justify-content: space-between;
}

.operate_block {
	margin: 0;
	padding: 0;
	border: 0;
	background-color: transparent;
	line-height: inherit;
	font-weight: 400;
	font-size: 25rpx;
	color: #FFFFFF;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	text-align: center;
}

.operate_block::after {
	border: none;
}

.operate_icon {
	width: 58rpx;
	height: 58rpx;
}

.address {
	margin: 0 28rpx;
	margin-top: 36rpx;
}

.address_title {
	font-weight: 700;
	font-size: 36rpx;
	color: #303133;
	line-height: 47rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.map {
	background: url('https://obs-icon.obs.cn-east-3.myhuaweicloud.com/tzmc/WeChatb5aa42c12193c73f6da04f4ba6c062d5.jpg');
	background-size: cover;
	height: 101rpx;
	margin-top: 21rpx;
	font-weight: 400;
	font-size: 25rpx;
	color: #303133;
	line-height: 33rpx;
	text-align: left;
	font-style: normal;
	text-transform: none;
	padding: 0 28rpx;
	overflow: hidden;
	line-height: 101rpx;
	border-radius: 22rpx 22rpx 22rpx 22rpx;
}

.map_icon {
	width: 43rpx;
	height: 43rpx;
	margin-right: 7rpx;
}

.company_block {
	height: 420rpx;
	background: linear-gradient(162deg, #FFFFFF 0%, #F0F2FE 100%);
	border-radius: 22rpx 22rpx 22rpx 22rpx;
	margin-top: 21rpx;
	padding: 28rpx;
}

.company_info {
	font-weight: 400;
	font-size: 29rpx;
	color: #606266;
	line-height: 43rpx;
	text-align: justify;
	font-style: normal;
	text-transform: none;
	word-break: break-all;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	margin-bottom: 14rpx;
}

.company_bg {
	border-radius: 7rpx 7rpx 7rpx 7rpx;
	overflow: hidden;
	width: 100%;
}

body {
	background: #F5F5F5;
}

page {
	background: #F5F5F5;
}

.company_header {
	display: flex;
	justify-content: space-between;
	font-weight: 400;
	font-size: 29rpx;
	line-height: 47rpx;
	color: #909193;
	text-align: left;
	font-style: normal;
	text-transform: none;
}

.more {
	width: 25rpx;
	height: 25rpx;
}

.hidden-share-button {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	opacity: 0;
	z-index: -1;
}

.add {
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	border: 2rpx solid #CECCCA;
	position: fixed;
	bottom: 0;
	height: 130rpx;
	width: 100%;
	// padding: 21rpx 28rpx;
}

.add_button {
	margin: 21rpx 28rpx;
	background: linear-gradient(180deg, #6078FE 0%, #575BFC 100%), #FFFFFF;
	border-radius: 293rpx 293rpx 293rpx 293rpx;
	// width: 100%;
	height: 87rpx;
	line-height: 87rpx;
	text-align: center;
	font-weight: 700;
	font-size: 29rpx;
	color: #FFFFFF;
	font-style: normal;
	text-transform: none;
}

.custom-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 44px;
	/* 导航栏高度 */
	background: transparent;
	/* 或自定义背景色 */
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-size: 18px;
	z-index: 999;
}

.back-button {
	position: absolute;
	left: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
}

.icon {
	font-size: 24px;
	font-weight: bold;
}

.nav-title {
	font-size: 18px;
	font-weight: 500;
	color: rgba(255, 255, 255, 0.9);
	line-height: 43rpx;
	text-align: center;
	font-style: normal;
	text-transform: none;
}

.other {
	margin-top: 21rpx;
	background: #FFFFFF;
	border-radius: 22rpx 22rpx 22rpx 22rpx;
	padding: 14rpx 29rpx;
}

.other_block {

	display: flex;
	justify-content: space-between;
	font-size: 29rpx;
	color: #909193;
	align-items: center;
	margin: 20rpx 0;
	// height: 86rpx;
}

.other_title {
	display: flex;
	align-items: center;
	width: 30%;
}

.other_icon {
	width: 57rpx;
	height: 57rpx;
	;
	margin-right: 14rpx;
}

.other_content {
	color: #606266;
}

.postion {
	display: flex;
	flex-wrap: wrap;
	/* 允许换行 */
	gap: 10px;
	/* 控制元素之间的间距，可选 */
	flex-direction: row-reverse;
	width: 70%;
	;
}

.other_content_block {
	background: rgba(92, 109, 253, 0.2);
	border-radius: 11rpx 11rpx 11rpx 11rpx;
	padding: 3rpx 10rpx;
	margin-left: 10rpx;
	font-size: 24rpx;
	color: #5C6DFD;
}

.block_center {
	display: flex;
	align-items: center;
}

.contact_text {
	max-width: 200rpx;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.center {
	align-items: center;
}

.start {
	align-items: start;
}

.postion_block {

	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 22rpx 0;
	
}

.postion_block_border{
	border-bottom: 1rpx solid #E9E9E9;
}

.postion_block-title {
	font-size: 29rpx;
	color: #303133;
	text-align: right;
}

.postion_block-text {
	background: rgba(92, 109, 253, 0.2);
	border-radius: 11rpx 11rpx 11rpx 11rpx;
	font-weight: 400;
	font-size: 25rpx;
	color: #5C6DFD;
	display: inline-block;
	padding: 7rpx 10rpx;
	margin-top: 7rpx;
	margin-left: 5rpx;
}

.postion_icon_company {
	border-radius: 14rpx;
	width: 86rpx;
	height: 86rpx;
}
</style>